<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo04</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>

    
    const app = Vue.createApp({
        data() {
            return {
                name: "就和凯撒比较方便和",
            }
        },

        template: `
            <h2>JSPang.com</h2>
            <Son :name ="name" />
        `
    })

    app.component('Son', {
            props: {
                name: {              //类型校验  校验name位String类的
                    type: String,    // required: true,  //必须传递这个参数 name的值必须是String 并且不可以省略的 
                    // validator: function (value) {
                    //     console.log(value.search("JSPang"))
                    //     return value.search("JSPang") != -1
                    // },
                    default: 'JSPang.com'   //默认值
                }
            },
            template: `<div>{{name}} div </div>`
        })

    const vm = app.mount("#app")

    //Vue支持的校验类型包括:String、Boolean、Array、Object、Function和Symbol。

    //必填校验 和 默认值的设置
    //required  必填项 要求组件使用时，必须传递参数，可以使用required来校验.
    //default   默认值
    //validator 精准校验 如果上面这些校验都不能满足你 要求传递的字符串中必须包括 XXXXXX 这几个字符，就可以用validator来进行校验
        //一个函数，并接受一个value值，这个value就是传递过来的值。
       


    /*
        props: {
        title: String,
        likes: Number,
        isPublished: Boolean,
        commentIds: Array,
        author: Object,
        callback: Function,
        contactsPromise: Promise // 或任何其他构造函数
        }
    */
   
</script>

</html>